import React from 'react'
import { renderToStaticMarkup } from 'react-dom/server';
import _ from 'underscore'
import Card from 'lib/components/card.jsx'
import ChartWidget from 'lib/components/ChartWidget.jsx'
import format from 'lib/util/format'

const indicatorColorMap = {
  'xmlhttprequest':'#82B5FC',
  'script':'#FEC584',
  'css':'#6AE0E0',
  'img':'#C49AE8'
}

export default class WebViewResource extends React.Component{
  constructor(props){
    super(props)
    var wholeTime = {
      startTime:_(props.resources).chain().pluck('startTime').min().value(),
      endTime:_(props.resources).chain().pluck('responseEnd').max().value()
    }
    wholeTime.duration = wholeTime.endTime - wholeTime.startTime
    this.state = {
      resources:props.resources,
      wholeTime:wholeTime,
      hosts:_(props.resources).chain().pluck('host').uniq().value(),
      hostSpec:'',
      typeSpec:'',
      types:[{
        label:'全部',
        value:''
      },{
        label:'XHR',
        value:'xmlhttprequest'
      },{
        label:'Script',
        value:'script'
      },{
        label:'Style',
        value:'css'
      },{
        label:'Images',
        value:'img'
      }]
    }
    this.handleShowHost = this.handleShowHost.bind(this)
  }
  changeShowType(v){
    this.setState({
      typeSpec:v
    })
  }
  handleShowHost(){
    this.setState({
      hostSpec:$(this.refs.host).val()
    })
  }
  render(){
    let {resources} = this.state
    return (
      <div className="widget-content">
        <div className="pure-g">
          <div className="pure-u-1">
            <div className="box">
              <Card>
                <div className="pure-g">
                  <div className="pure-u-1">
                    类型：
                    {
                      this.state.types.map((t) => {
                        return (
                          <label key={t.value} style={{marginLeft:5,marginRight:5}}>
                            <input type="radio" name="initiatorType" value={t.value} onChange={this.changeShowType.bind(this,t.value)} defaultChecked={t.value===this.state.typeSpec}/>
                            <span style={{marginLeft:5}}>{t.label}</span>
                          </label>
                        )
                      })
                    }
                    域名：
                    <select ref="host" style={{display:'inline-block'}} defaultValue={this.state.hostSpec} onChange={this.handleShowHost}>
                      <option value="">全部</option>
                      {
                        this.state.hosts.map((h) => {
                          return (
                            <option value={h} key={h}>{h}</option>
                          )
                        })
                      }
                    </select>
                  </div>
                </div>
                <div className="pure-g">
                  <div className="pure-u-1">
                    <div className="box">
                      <Card title="资源列表 - 时序图">
                        <table className="table table-striped table-layout">
                          <thead>
                            <tr>
                              <th>uri</th>
                              <th style={{width:70}}>耗时(ms)</th>
                              <th style={{width:50}}>类型</th>
                            </tr>
                          </thead>
                          <tbody>
                            {
                              resources.filter((res) => {
                                return !this.state.typeSpec || res.initiatorType === this.state.typeSpec
                              }).filter((res) => {
                                return !this.state.hostSpec || res.host === this.state.hostSpec
                              }).map((res) => {
                                var parser = document.createElement('a');
                                parser.href = res.name;

                                let tip = renderToStaticMarkup(
                                  <div>
                                    域名：{parser.host}
                                    <br/>
                                    路径：{parser.pathname+parser.search+parser.hash}
                                    <br/>
                                    耗时：{format.numSecond(res.duration / 1000)}
                                    <br/>
                                    类型：{res.initiatorType}
                                  </div>
                                );
                                return (
                                  <tr key={res.id} data-tip={tip}>
                                    <td key="name" style={{padding:0}}>
                                      <div style={{position:'relative',height:36,lineHeight:'36px'}}>
                                        <div style={{
                                            position:'relative',
                                            zIndex:10,
                                            whiteSpace:'nowrap',
                                            overflow:'hidden',
                                            textOverflow:'ellipsis'
                                          }}>{res.name}</div>
                                        <div style={{
                                          position:'absolute',
                                          zIndex:9,
                                          top:0,
                                          left:format.rate((res.startTime - this.state.wholeTime.startTime)/this.state.wholeTime.duration),
                                          width:!res.duration ? 0 : format.rate(res.duration/this.state.wholeTime.duration),
                                          height:36,
                                          backgroundColor:indicatorColorMap[res.initiatorType]
                                        }} />
                                      </div>
                                    </td>
                                    <td key="duration" style={{padding:0}}>
                                      <div style={{margin:8}}>
                                        {format.numberic(res.duration)}
                                      </div>
                                    </td>
                                    <td key="type" style={{padding:0}}>
                                      <div style={{margin:8}}>
                                        {res.initiatorType}
                                      </div>
                                    </td>
                                  </tr>
                                )
                              },this)
                            }
                          </tbody>
                        </table>
                      </Card>
                    </div>
                  </div>
                </div>
              </Card>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
